<template>
  <div class="profile">
    <div>
      <img class="head" src="../assets/avatar.jpg"/>
    </div>
    <div class="profile-name">
      {{ user.name }}
      <span class="profile-admin" v-if="user.group === 4">管理员</span>
    </div>
    <div class="profile-email">
      {{ user.email }}
    </div>
    <div class="profile-edit">
      <el-button type="primary" @click="editFormVisible= true">
        修改信息
      </el-button>

    </div>

  </div>

  <el-dialog v-model="editFormVisible" title="更新个人信息">
    <el-form :model="selfForm">
      <el-form-item label="邮箱">
        <el-input v-model="selfForm.email" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleUpdateSelf">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import {postBackend} from "@/main";
import {ElNotification} from "element-plus";
export default {
  name: 'UserInfo',
  props: {
    user: Object
  },
  data() {
    return {
      editFormVisible: false,
      selfForm: {
        email: ""
      }
    }
  },
  methods: {
    handleUpdateSelf() {
      this.editFormVisible = false
      postBackend('/api/user/updateSelf', this.selfForm, res => {
        console.log(res.data)
        if (res.data.code === 0) {
          ElNotification({
            title: '成功',
            message: '更新成功'
          })
          this.$emit("refresh")
        } else {
          ElNotification({
            title: '失败',
            message: '更新失败，原因: ' + res.data.msg,
            type: 'warning'
          })
        }

      }, err => {
        ElNotification({
          title: '失败',
          message: '更新失败，原因: ' + err,
          type: 'warning'
        })
        console.log(err);
      })
    },
  }
}
</script>


<style scoped>
.profile-admin {
  background-color: #409EFF;
  padding: 3px;
  border-radius: 5px;
  color: var(--el-bg-color);
  font-size: var(--el-font-size-extra-small);
}

.profile {
  margin-left: 20px;
  padding: 10px;
  text-align: center;
  width: fit-content;
  background-color: #a0cfff;
  border-radius: 10px;
}

.profile-edit {
  padding: 5px;
}

.profile-name {
  margin-top: 10px;
  color: #303133;
}

.profile-email {
  color: #606266;
}

.head {
  margin-right: 0px;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  box-shadow: 3px 8px 13px 4px rgba(0, 0, 0, 0.14);
}
</style>
